<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>上传图片-百度蕾丝</title>
	<link href="css/layout.css" rel="stylesheet">
	<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="js/jquery.js"></script>
	<script>
		var fileForm = new Object();
		function ajaxUpload(Obj){
			if(Obj.value != ""){
				var form = document.forms[0];
				fileForm.f = form;
				fileForm.a = form.getAttribute("action");
				fileForm.t = form.target;
				//请求服务端
				form.target = "uploadFrame";
				form.action = "inc/upload.asp";
				form.submit();
			}
			return false;
		}
		function ajaxCallback(ErrNum,ResponseText) {
			fileForm.f.target = fileForm.t;
			fileForm.f.setAttribute("action",fileForm.a);
			switch(ErrNum){
				case 0:
					alert(ResponseText)
				case 1:
					fileName = ResponseText.split("/")[ResponseText.split("/").length-1]
					$("#files").val($("#files").val()+fileName+",")
					//$(".view-list .list").append("<a href='javascript:;' data-filename='"+fileName+"'><img src='"+ResponseText+"' alt=''><span class='act-del'><i class='icon-del'>删除</i></span></a>")
					$(".view-list .list").append('<li><a href="javascript:;" data-filename="'+fileName+'" class="img-view"><img src="'+ResponseText+'" alt=""><span class="act-del"><i class="icon-del">删除</i></span></a><fieldset class="add-info"><legend>描述一下吧…</legend><p><b class="fluid-input"><b class="fluid-input-inner"><input class="txt" type="text" name="title" placeholder="标题"></b></b></p><p><b class="fluid-input"><b class="fluid-input-inner"><input class="txt" type="text" name="desc" placeholder="描述"></b></b></p><input id="files" type="hidden" name="files" value="'+fileName+'"></fieldset></li>')
					$(".nodata").css("display","none")
					$(".upload-btn .sel-file").attr("disabled","")
					$(".upload-btn .btn").text("选择文件")
			}
			return;
		}

		$(function(){
			$("input[type='file']").change(function(){
				ajaxUpload(this);
				$(this).attr("disabled","disabled")
				$(this).siblings(".btn").text("正在上传...")
			})
			$(".view-list a").live("click",function(){
				if(confirm('确定删除该图片吗?')){
					$(".act-del",this).addClass("act-deling").html("<i class='tips'>删除中...</i>")
					$.ajax({ 
						url:'/inc/del.asp', 
						type:'post', //数据发送方式 
						dataType:'html', //接受数据格式
						data:'act=pic&type=only&filename='+$(this).data("filename"),  //要传递的数据 
						error: function(){  //失败
							alert('文档加载错误！');
						},
						success: function(msg){ //成功
							alert(msg)
						}
					});
					$(this).parents("li").remove()
				}
			})
			// end live
			$(".btn[type='submit']").click(function(){
				var inputArr = $(".mod-form input");
				for(i=0;i<inputArr.length;i++){
					alert(inputArr[i].value)
				}
				return false;
			})
		})
	</script>
</head>
<body>
<section class="wrapper">
	<header class="hd">
		<h1><a href="/" class="logo">分享自己的照片</a></h1>
	</header>
	<section class="bd">
		<form class="mod-form" action="?" method="post" enctype="multipart/form-data">
			<fieldset>
				<legend>上传图片：</legend>
				<section class="upload-btn">
					<span class="btn">选择文件</span>
					<input class="sel-file" type="file" name="FILE1">
				</section>
				<article class="view-list">
					<span class="nodata">还没有上传任何图片…</span>
					<ul class="list">
						<!--li>
							<a href="" class="img-view"><img src="/photo/thumb/2011102815442684.jpg" alt=""></a>
							<fieldset class="add-info">
								<legend>描述一下吧…</legend>
								<p><b class="fluid-input"><b class="fluid-input-inner"><input class="txt" type="text" name="title" placeholder="标题"></b></b></p>
								<p><input class="txt" type="text" name="desc" placeholder="描述"></p>
							</fieldset>
							<a href="" class="act-del"><i class="icon-del">删除</i></a>
						</li-->
					</ul>
				</article>
			</fieldset>
			<fieldset>
				<legend>个人信息：</legend>
				<table>
					<tr>
						<th>您的大名：</th>
						<td><b class="fluid-input"><b class="fluid-input-inner"><input name="username" type="text" placeholder="泽东毛" class="txt"></b></b></td>
					</tr>
					<tr>
						<th>您的邮箱：</th>
						<td><b class="fluid-input"><b class="fluid-input-inner"><input name="email" type="email" placeholder="yourname@domain.com" class="txt"></b></b></td>
					</tr>
					<tr>
						<th>您的主页：</th>
						<td><b class="fluid-input"><b class="fluid-input-inner"><input name="url" type="url" placeholder="http://" class="txt"></b></b></td>
					</tr>
					<tr>
						<th></th>
						<td><button type="submit" class="btn">提交</button></td>
					</tr>
				</table>
			</fieldset>
		</form>
		<iframe src="about:blank" name="uploadFrame" style="display:none"></iframe>
	</section>
	<footer></footer>
</section>
</body>
</html>